<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>WireDog</title>
		<link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.7/themes/metro/easyui.css">
		<link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.7/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="../demo.css">
		<script type="text/javascript" src="jquery-easyui-1.9.7/jquery.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.9.7/jquery.easyui.min.js"></script>
		<script type="text/javascript">
			function sessionDgClickRow(index, row) {
				$.get("/session/get?id=" + row.sessionId, function(jsonObj) {
					// load data
					$("#SESN_STAGE").find("#requestHeaderPannel").html(jsonObj.requestHeader);
					$("#SESN_STAGE").find("#requestPannel4Detail").find("#source").html(jsonObj.requestBody4Source);
					$("#SESN_STAGE").find("#requestPannel4Detail").find("#parsed").html(jsonObj.requestBody4Parsed);
					$("#SESN_STAGE").find("#responseHeaderPannel").html(jsonObj.responseHeader);
					$("#SESN_STAGE").find("#responsePannel4Detail").find("#source").html(jsonObj.responseBody4Source);
					$("#SESN_STAGE").find("#responsePannel4Detail").find("#parsed").html(jsonObj.responseBody4Parsed);
					// expand east_panel
					if($("#SESN_STAGE").find("#eastPannel").panel("options")["collapsed"] == true) {
						$("#SESN_STAGE").find("body").layout("expand", "east");
					}
				});
			}
			
			function pipeDgDbClickRow(index, row) {
				$("body").tabs("select", 1);
				$("#SESN_STAGE").find("#sessionDgTb").find("#searchPipe").tagbox({ prompt : "", value : "PIPE" + row.pipeId });
		        $("#SESN_STAGE").find("#dgMain").datagrid("load", {
		        	pipe_id: row.pipeId
		        });
			}
			
			function reqDgReload() {
				$("#SESN_STAGE").find("#dgMain").datagrid("load", {
		        });
			}
			
			function pipeDgClickRow(index, row) {
				$.get("/pipe/get?id=" + row.pipeId, function(jsonObj) {
					// load data
					$("#PIPE_STAGE").find("#eventsDg").datagrid("loadData", jsonObj.pipeEvent);
					// expand east_panel
					if($("#PIPE_STAGE").find("#eastPannel").panel("options")["collapsed"] == true) {
						$("body").layout("expand", "east");
					}
					
					// resize layout
					$("#PIPE_STAGE").find("#eastPannel").panel("doLayout");
					$("#PIPE_STAGE").find("#tab").panel("doLayout");
					$("#PIPE_STAGE").find("#tab-tools").panel("doLayout");
				});
			}
			
			var wssocket;
			var consoleId = new Date().getTime();
			
			function clearPipeDgRows() {
				$("#PIPE_STAGE").find("#dgMain").datagrid("loadData", []);
			}
			
			$(function(){
		        $('#filterBtn').switchbutton({
		            checked: true,
		            onChange: function(checked){
		                $("#PIPE_STAGE").find("#dgMain").datagrid("load", {
				        	active: checked
				        });
		            }
		        });
		        $("#PIPE_STAGE").find("#dgMain").datagrid("load", {
		        	active: true
		        });
		        
				if (!window.WebSocket) {
					window.WebSocket = window.MozWebSocket;
				}
				
		        wssocket = new WebSocket("ws://localhost:52996/ws_connect?console_id=" + consoleId);
		        setInterval(function() {
					wssocket.send("{'type': 9001}");
				}, 5000);
				
				wssocket.onmessage = function(event) {
					var msg = JSON.parse(event.data);
					if (msg.type == 1001) {
						/*** NEW PIPE CONNECT ***/
						$("#PIPE_STAGE").find("#dgMain").datagrid("appendRow", msg.data);
						// $("#PIPE_STAGE").find("#dgMain").datagrid("scrollTo", $("#PIPE_STAGE").find("#dgMain").datagrid("getRows"));
					} else if (msg.type == 1003) {
						/*** PIPE STATUS CHANGE ***/
						var rows = $("#PIPE_STAGE").find("#dgMain").datagrid("getData").rows;
						var idx = -1;
						for (var i = 0; i < rows.length; i ++) {
							if (msg.data.pipeId == rows[i].pipeId) {
								idx = i;
								break;
							}
						}
						if (idx >= 0 && msg.data.status != "Closed") {
							$("#PIPE_STAGE").find("#dgMain").datagrid("updateRow", {
								index: idx, 
								row : msg.data
							});
						} else if (idx < 0) {
							$("#PIPE_STAGE").find("#dgMain").datagrid("appendRow", msg.data);
						}
					} else if (msg.type == 1002) {
						/*** PIPE DISCONNECT ***/
						var rows = $("#PIPE_STAGE").find("#dgMain").datagrid("getData").rows;
						var idx = -1;
						for (var i = 0; i < rows.length; i ++) {
							if (msg.data.pipeId == rows[i].pipeId) {
								idx = i;
								break;
							}
						}
						if (idx >= 0 && $("#PIPE_STAGE").find("#filterBtn").switchbutton("options").checked) {
							$("#PIPE_STAGE").find("#dgMain").datagrid("deleteRow", idx);
						} else {
							$("#PIPE_STAGE").find("#dgMain").datagrid("updateRow", {
								index: idx, 
								row : msg.data
							});
						}
					} else if (msg.type == 2001) {
						/*** SESSION CONNECT ***/
						$("#SESN_STAGE").find("#dgMain").datagrid("appendRow", msg.data);
					}
				};
		    })
		    
		    function clickSessionSearchBtn() {
		    	$("#SESN_STAGE").find("#dgMain").datagrid("load", {
		    		keyword : $("#SESN_STAGE").find("#sessionKeyword").val(),
		    		host : $("#SESN_STAGE").find("#hostKeyword").val()
		    	});
		    }
			
		    function clickSessionSearchBtn() {
		    	$("#SESN_STAGE").find("#dgMain").datagrid("load", {
		    		keyword : $("#SESN_STAGE").find("#sessionKeyword").val(),
		    		host : $("#SESN_STAGE").find("#hostKeyword").val()
		    	});
		    }
		    
		    function dataGridContextMenu(e, index, row) {
		    	e.preventDefault();
		    	if (!cmenu){
					createColumnMenu();
				}
				cmenu.menu('show', {
					left:e.pageX,
					top:e.pageY
				});
		    }
			
			var cmenu;
			function createColumnMenu(){
				cmenu = $('<div/>').appendTo('body');
				cmenu.menu({
					onClick: function(item){
						if (item.id == "btn2") {
							$.post("/session/clear", function(resp) {
								$("#SESN_STAGE").find("#dgMain").datagrid("loadData", []);
							});
						} else {
							$("#SESN_STAGE").find("#dgMain").datagrid("loadData", []);
						}
					}
				});
				cmenu.menu('appendItem', {
					id: 'btn1',
					text: "Clear Browser Records"
				});
				cmenu.menu('appendItem', {
					id: 'btn2',
					text: "Clear Server Records"
				});
			}
		</script>
	</head>
	<body class="easyui-tabs" data-options="fit:true, tabPosition:'left', border:false, plain:true, headerWidth: 60">
		<!-- SESSION -->
		<div title="SESN" data-options="fit:true, border:false" class="easyui-layout" id="SESN_STAGE">
			<div id="centerLayout" data-options="region:'center'" style="padding:5px 5px 10px 5px; width:40%">
				<table class="easyui-datagrid" id="dgMain" data-options="remoteSort: false, fit:true, border:false, toolbar:'#sessionDgTb', onRowContextMenu:dataGridContextMenu, onClickRow:sessionDgClickRow, striped:true,singleSelect:true,collapsible:true,url:'/session/list',method:'get'">
					<thead>
						<tr>
							<th data-options="field:'sessionId', width: 55, align: 'center'">ID</th>
							<th data-options="field:'uri', width: '90%'">Name</th>
							<th data-options="field:'responseCode', sortable:true, sorter:function(a,b){return a<b;}">Code</th>
						</tr>
					</thead>
				</table>
				<div id="sessionDgTb" style="padding:5px;height:auto">
					<!-- BUG：增加了TagBox，左侧就会多一个空的Tab页 -->
					<input class="easyui-tagbox" id="searchPipe" data-options="prompt:'Pipe Filter', onRemoveTag: reqDgReload" style="width:125px;" />
					<input class="easyui-textbox" id="hostKeyword" data-options="prompt:'Search Host'" style="width:100px" />
					<input class="easyui-textbox" id="sessionKeyword" data-options="prompt:'Search Keyword'" style="width:200px" />
					<!-- 
					<select class="easyui-combobox" style="width:100px;">
					    <option value="all">*</option>
					    <option value="text/html">html</option>
					    <option value="application/json">json</option>
					    <option value="jpeg/gif/png">image</option>
					</select>-->
					<a href="javascript:clickSessionSearchBtn();" class="easyui-linkbutton" iconCls="icon-search">Search</a>
				</div>
			</div>
			<div class="easyui-layout" id="eastPannel" data-options="region:'east',split:true" style="width:60%;">
				<div class="easyui-tabs" id="tab" data-options="tools:'#tab-tools', region:'center', border:false, plain:true, tabWidth:100, tabPosition: 'top'">
					<div title="Request" data-options="fit:true, border:false" class="easyui-layout" >
						<div id="requestHeaderPannel" data-options="border:false, title:'SourceText',region:'north',split:true,collapsible:false" style="height:100%;padding:5px 5px 50px 5px;">
						</div>
						<div id="requestPannel4Detail" class="easyui-tabs" data-options="region:'south', border:false,split:true,collapsible:false" style="height:60%;padding:5px 5px 50px 5px;">
							<div id="parsed" title="Parsed" data-options="fit:true, border:false">
							</div>
							<div id="source" title="Source" data-options="fit:true, border:false">
							</div>
						</div>
					</div>
					<div title="Response" data-options="fit:true, border:false" class="easyui-layout" >
						<div id="responseHeaderPannel" data-options="title:'Header',region:'center', border:false,split:true,collapsible:false" style="height:40%;padding:5px 5px 5px 5px;">
						</div>
						<div id="responsePannel4Detail" class="easyui-tabs" data-options="region:'south', border:false,split:true,collapsible:false" style="height:60%;padding:5px 5px 50px 5px;">
							<div id="parsed" title="Parsed" data-options="fit:true, border:false">
							</div>
							<div id="source" title="Source" data-options="fit:true, border:false">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div title="PIPE" data-options="fit:true, border:false" class="easyui-layout" id="PIPE_STAGE">
			<div id="centerLayout" data-options="region:'center'" style="padding:0px; width:40%">
				<div id="pipeDgTb" style="padding:5px;height:auto">
					<a class="easyui-linkbutton" data-options="iconCls:'icon-tip'" href="/c/d"> Cert Download </a>
					<a class="easyui-linkbutton" data-options="iconCls:'icon-clear'" onclick="clearPipeDgRows();">Clear</a>
					<input id="filterBtn" class="easyui-switchbutton" checked style="width:60px;height:20px" />
				</div>
				<table class="easyui-datagrid" id="dgMain" data-options="remoteSort: false, fit:true, toolbar:'#pipeDgTb', onDblClickRow:pipeDgDbClickRow, onClickRow:pipeDgClickRow, border:false,striped:true,singleSelect:true,collapsible:true,url:'/pipe/list',method:'get'">
					<thead>
						<tr>
							<th data-options="field:'pipeId', width:50, align: 'center'">ID</th>
							<th data-options="field:'protocol', width:57, align: 'center'">/</th>
							<th data-options="field:'status', width:80, align: 'center'">Status</th>
							<th data-options="field:'name', width: '80%'">Name</th>
						</tr>
					</thead>
				</table>
			</div>
			<div class="easyui-layout" id="eastPannel" data-options="region:'east',split:true" style="width:60%;">
			    <div id="tab-tools">
			        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true" onclick="$('body').layout('collapse', 'east');">×</a>
			    </div>
				<div class="easyui-tabs" id="tab" data-options="tools:'#tab-tools', region:'center', border:false, plain:true, tabWidth:100, tabPosition: 'top'">
			        <div title="Events" data-options="" id="eventsPannel" style="padding:5px 5px 50px 5px;">
					    <table class="easyui-datagrid" id="eventsDg" data-options="border:false">
					        <thead>
					            <tr>
					                <th data-options="field:'type',width:100, hidden:true">EventType</th>
					                <th data-options="field:'desc',width:300">Event Desc</th>
					                <th data-options="field:'time',width:200, align:'center'">Event Time</th>
					            </tr>
					        </thead>
					    </table>
			        </div>
				</div>
			</div>
		</div>
	</body>
</html>